<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="24">
        <div>
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px">专家组</span>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :data="GroupList"
            style="width: 100%; margin-bottom: 20px"
            border>
            <el-table-column prop="panelName" label="名称"> 
                <template v-slot="scope">
                <span v-show="scope.row.state"> {{ scope.row.panelName }}</span>
                <el-input
                  type="text"
                  v-model="scope.row.panelName"
                  v-show="!scope.row.state"/>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="描述">
              <template v-slot="scope">
                <span v-show="scope.row.state"> {{ scope.row.remark }}</span>
                <el-input
                  type="text"
                  v-model="scope.row.remark"
                  v-show="!scope.row.state"/>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  v-show="scope.row.state">编辑</el-button>
                <el-button
                  type="success"
                  @click="hold(scope.$index, scope.row)"
                  v-show="!scope.row.state">保存</el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="warning" plain @click="addLine()">添加专家组</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { v4 } from "uuid";
export default {
  //数据
  data() {
    return {
      GroupList: undefined,
      GroupInfor: {
          panelName:"",//专家组名称
          remark:"",  //简介
          createor:JSON.parse(localStorage.getItem("user")).userName,//创建人
          modifier:JSON.parse(localStorage.getItem("user")).userName,//修改人
          modifierTime:"",//修改时间
          isDel:0,
          createTime:new Date(),//创建时间
      },
      loading: true,
    };
  },
  //计算属性
  computed: {},
  //挂载
  created() {
    this.GetGroupList();
  },
  //方法
  methods: {
    //获取专家分组信息
    GetGroupList() {
      this.loading = true;
      this.http
        .post("api/tb_project_reviewspecial_group/GetList")
        .then((res) => {
          //console.log(res.data)
          this.GroupList = res.data;
          console.log(res)
          this.loading = false;
          //console.log(this.GroupList);
        });
    },
    /* 编辑 */
    handleEdit(index, row) {
      row.state = false;
    },
    /* 保存，新添加的后或修改的重新保存 */
    hold(index, row) {
      //有id序走修改
      if (row.panelID != undefined) {
        console.log(row.createTime)
        console.log(this.GroupInfor.createTime)
        let main={
            panelID:row.panelID,
            panelName:row.panelName,
            remark:row.remark,
            createTime:row.createTime,//创建时间
            createor:JSON.parse(localStorage.getItem("user")).userName,//创建人
            modifier:JSON.parse(localStorage.getItem("user")).userName,//修改人
            modifierTime:new Date(),//修改时间
            isDel:0,
        }
        if(row.panelName==""||row.remark==""){
            this.$message("不能为空！")
            return
        }else{
         this.http
            .post("api/tb_project_reviewspecial_group/QueryName?name="+row.panelName).then((res=>{
              if(res.data){
                this.$message({
                  type: "error",
                  message: res.message
                });
                this.GetGroupList();
                return
                }
                else{
                  this.http.post("api/tb_project_reviewspecial_group/UpdateInfo", main).then((res) => {
                  console.log(res);
                  if (res.status) {
                    this.$message({
                      type: "success",
                      message: res.message,
                    });
                    this.GetGroupList();
                  } else {
                    this.$message("保存失败");
                  }
                });
                }
            }))
        }
      } //没id走添加
      else {
        if(row.panelName==""||row.remark==""){
            this.$message("不能为空！")
            return
        }
        else{
            this.http
            .post("api/tb_project_reviewspecial_group/QueryName?name="+row.panelName)
            .then((res) => {
              console.log(res)
              if(res.data){
                this.$message({
                  type: "error",
                  message: res.message
                });
                this.GetGroupList();
                return
              }
              else{
                this.GroupInfor.panelName = row.panelName;
                this.GroupInfor.remark = row.remark;
                let main = {
                  mainData: this.GroupInfor,
                  detailData: null,
                  delKeys: null,
                };
                console.log(main);
                this.http.post("api/tb_project_reviewspecial_group/Add", main).then((res) => {
                  console.log(res);
                  if (res.status) {
                    this.$message({
                      type: "success",
                      message: res.message,
                    });
                    this.GetGroupList();
                  } else {
                    this.$message("添加失败");
                  }
                });
              }
            });
        }
        
      }
      row.state = true;
    },
    /* 删除 */
    handleDelete(index, row) {
      //console.log(index, row);
      //this.GroupList.splice(row);
      this.$confirm("确认删除？？？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var ids = [];
          ids.push(row.panelID);
          this.http.post("api/tb_project_reviewspecial_group/DeleteList?id="+ids).then((res) => {
            if (res.status) {
              this.GetGroupList();
              this.$message({
                type: "success",
                message: res.message,
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.Isdisable = true;
        });
    },
    // /* 为当前行添加子集(默认是可编辑状态)*/
    // InsertSubset(index, row) {
    //   let obj = {
    //     dicKey: "XMLX_" + v4().replace(/[-]/g, "").slice(0, 4),
    //     dicValue: "",
    //     dicCode: row.id,
    //   };
    //   this.GroupList.splice(index + 1, 0, obj);
    //   console.log(this.GroupList);
    // },

    /* 添加新的一行 (默认是可编辑状态)*/
    addLine() {
      let obj = {
        // dicKey: "XMLX_" + v4().replace(/[-]/g, "").slice(0, 4),
        // dicValue: "",
        panelName:"",
        remark:"",
      };
      //追加
      this.GroupList.push(obj);
    },
  },
};
</script>

<style>
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-bottom: 0px solid;
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}

.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}

.el_Select /deep/ :root {
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: none;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
    0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style)
    var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}
</style>


